<template>
  <div class="height100 bgfff" style="padding: 20px;border-radius: 4px">
    <div class="f30 mb-5" style="font-weight: 500;font-size: 18px;color: #3D3D3D;line-height: 25px;margin-bottom: 20px">{{ translang('取消政策') }}</div>
    <div style="border-radius: 10px; border: 1px solid #ededed; padding: 20px; width: 1100px">
      <div class="flex-row  center_box  f16 fw mb-3">
        <div style="width: 25%">类型</div>
        <div style="width: 25%">名称</div>
        <div style="width: 25%">时间</div>
        <div class="flex-item">取消费</div>
      </div>
      <!-- before -->
      <div class="flex-row  f14 br-t pt-3 pb-3 ">
        <div class="lh-2" style="width: 25%">早于</div>
        <div class="center_box" style="width: 25%">
          <span v-if="state.before.nameLanguage.zh">{{ state.before.nameLanguage.zh.content }}</span>
          <n-button circle quaternary
                    @click="editItem(state.before.id,'CancelRateeditName','编辑取消政策名称',state.before.nameLanguage)">
            <template #icon>
              <n-icon>
                <CashIcon/>
              </n-icon>
            </template>
          </n-button>
        </div>
        <div style="width: 25%">
          <a-input-number
            id="inputNumber"
            v-model:value="state.before.endDays"
            :max="500"
            :min="1"
            @change="beforenumberchange"
          />
        </div>
        <div class="flex-item">
          <a-input-number
            v-model:value="state.before.rate"
            addon-after="%"
            @change="pmsCancelRateeditchange(state.before)"
          ></a-input-number>
        </div>
      </div>
      <!-- middle -->
      <div class="flex-row  f14 br-t pt-3 pb-3">
        <div style="width: 25%">{{ middleName }}</div>
        <div class="center_box" style="width: 25%">
          <span v-if="state.middle.nameLanguage.zh">{{ state.middle.nameLanguage.zh.content }}</span>
          <n-button circle quaternary
                    @click="editItem(state.middle.id,'CancelRateeditName','编辑取消政策名称',state.middle.nameLanguage)">
            <template #icon>
              <n-icon>
                <CashIcon/>
              </n-icon>
            </template>
          </n-button>
        </div>
        <div style="width: 25%">
          <a-input-number
            id="inputNumber"
            v-model:value="state.middle.endDays"
            :max="500"
            :min="1"
            @change="middlenumberchange"
          />
        </div>
        <div class="flex-item">
          <a-input-number
            v-model:value="state.middle.rate"
            addon-after="%"
            @change="pmsCancelRateeditchange(state.middle)"
          >
          </a-input-number>
        </div>
      </div>
      <!-- after -->
      <div class="flex-row  f14 br-t pt-3">
        <div style="width: 25%">{{ afterName }}</div>
        <div class="center_box" style="width: 25%">
          <span v-if="state.after.nameLanguage.zh">{{ state.after.nameLanguage.zh.content }}</span>
          <n-button circle quaternary
                    @click="editItem(state.after.id,'CancelRateeditName','编辑取消政策名称',state.after.nameLanguage)">
            <template #icon>
              <n-icon>
                <CashIcon/>
              </n-icon>
            </template>
          </n-button>
        </div>
        <div style=" width: 25%
              ">
        </div>
        <div class="flex-item">
          <a-input-number
            v-model:value="state.after.rate"
            addon-after="%"
            @change="pmsCancelRateeditchange(state.after)"
          >
          </a-input-number>
        </div>
      </div>
    </div>
    <baseEdit ref="editBaseRef" @reloadTable="DataLoad"/>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import baseEdit from '@/views/pmsProperty/comm/edit_base.vue';
import {Language as CashIcon} from '@vicons/ionicons5'
import {useMessage} from 'naive-ui';
import {jsontoobj, translang} from '@/utils/smjcomm';
import {pmsCancelRateedit, pmsCancelRatelist} from '@/api/comm';
import {useRouter} from "vue-router";

const router = useRouter();

const message = useMessage();
const editBaseRef = ref();
const middleName = ref('从 0 天到');
const afterName = ref('晚于 0 天');
const state = reactive({
  List: [],
  before: {
    id: 0,
    date: 1,
    mode: 'string',
    startDays: 0,
    endDays: 0,
    rate: 0,
    name: '早于',
    nameLanguage: {}
  },
  middle: {
    id: 0,
    mode: '',
    startDays: 0,
    endDays: 0,
    rate: 0,
    name: '请选择',
    nameLanguage: {}
  },

  after: {
    id: 0,
    mode: '',
    startDays: 0,
    rate: 0,
    name: '请选择',
    nameLanguage: {}
  },
});
const DataLoad = async () => {
  const res = await pmsCancelRatelist();
  state.List = res.list;
  res.list.forEach((f) => {

    if (f.nameLanguage) {
      f.nameLanguage = jsontoobj(f.nameLanguage);
      if (f.nameLanguage.zh_CN) {
        f.nameLanguage.zh_CN = f.nameLanguage.zh_CN
      } else if (f.nameLanguage.zh_cn) {
        f.nameLanguage.zh_CN = f.nameLanguage.zh_cn
      } else {
        f.nameLanguage.zh_CN = {}
      }
    } else {
      f.nameLanguage = {};
    }

    console.log(f)
    if (f.mode == 'before') {
      state.before = f;
      middleName.value = '从 ' + (state.before.endDays - 1) + ' 天到'
    } else if (f.mode == 'middle') {
      state.middle = f;
      afterName.value = '晚于 ' + (state.middle.endDays - 1) + ' 天';
    } else if (f.mode == 'after') {
      state.after = f;
    }


  });
};
const beforenumberchange = (val) => {
  state.middle.startDays = val - 1;
  middleName.value = '从 ' + state.middle.startDays + ' 天到';
  pmsCancelRateeditchange(state.before);
  pmsCancelRateeditchange(state.middle);
};
const middlenumberchange = (val) => {
  state.after.startDays = val - 1;
  afterName.value = '晚于 ' + state.after.startDays + ' 天';
  pmsCancelRateeditchange(state.middle);
  pmsCancelRateeditchange(state.after);
};
const pmsCancelRateeditchange = async (data) => {

  // debugger
  // 创建一个新的对象，以避免直接修改原始数据
  var pmsCancelRateeditchangeparams = { ...data };
  delete pmsCancelRateeditchangeparams.nameLanguage;
  const res = await pmsCancelRateedit(pmsCancelRateeditchangeparams);
  DataLoad();
};
onMounted(() => {
  DataLoad();
});

function editItem(id, type, title, data) {
  editBaseRef.value.openModal(id, type, title, data);
}

</script>

<style lang="less">
.center_box {
  display: flex;
  align-items: center;
}
</style>
